import React,{Component}from "react"
import store from "../store/index"
//UI组件和容器组件:次组件就是容器组件(负责逻辑) ,TodolistUi:UI组件(只负责页面)
import TodolistUi from "./TodolistUi"

//将每个action对象集中放置在actionsCreator中
import {inpChangeAction,subAction} from '../store/actionsCreator'
// const data = [
//     'Racing car sprays burning fuel into crowd.',
//     'Japanese princess to wed commoner.',
//     'Australian walks 100km after outback crash.',
//     'Man charged over missing wedding girl.',
//     'Los Angeles battles huge wildfires.',
//   ];
export default class Llist extends Component {
    constructor() {
        super()
        //store.getState():获取数据仓库里的数据
        // console.log(store.getState())
        // this.setState(store.getState())
        this.state = store.getState()
        //每当store中的数据改变时就会触发这个函数storeChange
        store.subscribe(this.storeChange)
    }
    render(){
        return <TodolistUi inpValue={this.state.inpValue} list={this.state.list} inpChange={this.inpChange} sub={this.sub} del={this.del}></TodolistUi>
    }
    //当数据改变时通知数据存储仓库
    inpChange= (e)=>{
        // let action = {
        //     type:INPCHANGE,
        //     value:e.target.value
        // }
        let action = inpChangeAction(e.target.value)
        //store.dispatch通知数据改变,并且告知reducer
        store.dispatch(action)
    }
    sub = (el)=>{
        // console.log(this.refs.inp.state)
        // let action = {
        //     type:SUBCON,
        //     value: this.refs.inp.state.value
        // }
        if (el.trim().length <= 0) {
            return;
        }
        let action = subAction(el)
        store.dispatch(action);
    }
    //删除方法
    del = (index)=>{
        // console.log(this)
        console.log(index)
    }
    storeChange = ()=>{
        console.log('数据变了')
        // this.state = store.getState();
        this.setState(store.getState(),()=> {
            console.log(this.state)
        })
        
    }
    
}